<template>
	<div class="xiangqing">
		<!-- 头部，头像，关注 -->
		<div class="header">
			<img src="../../img/cencle.png" alt="" @click="goback">
			<img src="../../img/community011.png" alt="">
			<span>62度江小白</span>
			<button @click="guanzhu1" :class="guanzhustyle?'guanzhu':'guanzhu2'">关注</button>
			<img src="../../img/f1.png" alt="">
		</div>
		<!-- 用户分享的图片 -->
		<div class="headerImg">
			<img src="../../img/bigimg.png" alt="">
		</div>
		<div class="pinglun">
			<h3>复古型咖啡厅 环境惬意 美味咖啡  </h3>
			快去快去快去快去快去快去快去快去快去快去快去快去快
		</div>
		<!-- 隐藏的评论区 -->
		<div class="pinglunqu" v-show="pinglunqu" @click="golist">
			
		</div>
		<div class="jubao">
			<mt-popup
			  v-model="popupVisible"
			  position="bottom">
			<button>回复</button>
			<button>举报</button>
			<button>取消</button>
			<!-- <button>回复</button> -->
			</mt-popup>
		</div>
		<div class="list" v-show="pinglunqu">
			<span>评论  2345</span>
			<ul>
				<li>
					<span><img src="../../img/community011.png" alt="">颜<img src="../../img/ficon2.png" alt="">10</span>
					<span @click="jubao">说得好   03-30</span>
				</li>
				<li>
					<span><img src="../../img/community011.png" alt="">颜<img src="../../img/ficon2.png" alt="">10</span>
					<span>说得好   03-30</span>
				</li>
				<li>
					<span><img src="../../img/community011.png" alt="">颜<img src="../../img/ficon2.png" alt="">10</span>
					<span>说得好   03-30</span>
				</li>
				<li>
					<span><img src="../../img/community011.png" alt="">颜<img src="../../img/ficon2.png" alt="">10</span>
					<span>说得好   03-30</span>
				</li>
				<li>
					<span><img src="../../img/community011.png" alt="">颜<img src="../../img/ficon2.png" alt="">10</span>
					<span>说得好   03-30</span>
				</li>
				<li>
					<span><img src="../../img/community011.png" alt="">颜<img src="../../img/ficon2.png" alt="">10</span>
					<span>说得好   03-30</span>
				</li>
			</ul>
		</div>
		
		
		<!-- 评论区 -->
		<footer>
			<input type="text" placeholder="...说两句">
			<span>
				<img src="../../img/ficon2.png" alt="">
				1245
			</span>
			<span @click="golist">
				<img src="../../img/pinglunicon.png" alt="" >
				4856
			</span>
		</footer>

		
	</div>
</template>

<script>
	import { Popup } from 'mint-ui';
	export default{
		name:'xiangqing',
		data(){
			return{
				popupVisible:false,
				pinglunqu:false,
				guanzhustyle:false
			}
		},
		methods:{
			jubao(){
				this.popupVisible = true
			},
			
			golist(){
				this.pinglunqu = !this.pinglunqu
			},
			goback(){
				this.$router.go(-1)
			},
			guanzhu1(){
				this.guanzhustyle = !this.guanzhustyle
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	.jubao{
		

			button{
				width:375px;
				height: 60px;
				
				}
		

	}
	.pinglunqu{
		width: 100%;
		height:100%;
		background-color: black;
		opacity: 0.4;
		z-index: 1;
		position: absolute;
		top: 0;
		left: 0;

	}
		.list{
			text-align: left;
			overflow: auto;
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1111;
			height: 400px;
			background-color: white;
			}
			span:nth-child(1){
				padding: 10px 20px;
				box-sizing: border-box;
				display: block;
				font-size: 20px;
			}
			ul{
				
				li{
					padding: 0 15px;
					box-sizing: border-box;
					span{display: block;margin: 10px 0;}
					span:nth-child(1){
						display: flex;
						align-items: center;
						img:nth-child(1){
							margin-right: 10px;
						}
						img:nth-child(2){
							margin-left: 60%;
						}
					}
					span:nth-child(2){
						margin-left: 10%;
						border-bottom: 1px solid lightgray;
					}
				}
			}
	footer{
		display: flex;
		align-items: center;
		
		span{
			display: inline-block;
			
			img{
				vertical-align: middle;
			}

		}

		
		border: 1px solid rgba(187, 187, 187, 100);
		input[type="text"]{
			width: 60%;
			height: 24px;
			line-height: 20px;
			border-radius: 21px;
			background-color: rgba(222, 240, 253, 50);
			text-align: center;
			border: 1px solid rgba(187, 187, 187, 100);
		}
		
	}
	.headerImg{
		img{
			width: 100%;
		}
	}
	//关注选中后的的样式
	.guanzhu{
		position: relative;
		color: white;
		background-color: red;
		width: 13%;
		height: 26px;
		border-radius: 13px;
		border: 1px solid red;
	}
	.pinglun{
		padding: 10px 10px;
		box-sizing: border-box;
		
		h3{
			margin: 10px 0;
			font-size: 20px;
			font-weight: 600;
		}
	}
	.header{
		padding:10px 0;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		
		img:nth-child(1){
			// margin: 5px 15px;
		}

		.guanzhu2{
			border: 1px solid red;
			color: red;
			background-color: white;
			width: 13%;
			height: 26px;
			border-radius: 13px;
		}
		span{
			text-align: left;
			color: lightslategray;
			font-size: 15px;
			width: 40%;
			line-height: 20px;
		}
		span:nth-child(2){
			margin-left: 10px;
		}

	
		
		
	}
</style>
